<style include="cr-shared-style settings-shared iron-flex passwords-shared">
  settings-avatar-icon {
    flex-shrink: 0;
    height: 40px;
    margin-inline-end: 16px;
    width: 40px;
  }

  #manageAccountPasswordsBanner {
    border: 1px solid var(--google-grey-300);
    border-radius: 10px;
    cursor: pointer;
    margin: 10px 20px;
    padding: 0 10px;
  }

  @media (prefers-color-scheme: dark) {
    #manageAccountPasswordsBanner {
      border: 1px solid var(--google-grey-700);
    }
  }

  #googleGIcon {
    margin-inline-end: 16px;
  }
</style>
<div id="moveMultiplePasswordsBanner" on-click="onMoveMultiplePasswordsTap_"
    class="cr-row two-line"
    hidden$="[[!shouldShowMoveMultiplePasswordsBanner_]]">
  <img id="googleGIcon" alt=""
  src="chrome://settings/images/googleg_standard_clr_32px.svg">
  <div class="flex cr-padded-text">
    <div>[[devicePasswordsLabel_]]</div>
    <div class="secondary">$i18n{passwordMovePasswordsToAccount}</div>
  </div>
  <cr-button id="moveMultiplePasswordsButton"
    class="action-button cr-button-gap">
    $i18n{passwordOpenMoveMultiplePasswordsToAccountDialogButtonText}
  </cr-button>
</div>
<div class="cr-row first">
  <h2 class="flex">
    $i18n{savedPasswordsHeading}
  </h2>
</div>
<passwords-list-handler id="passwordsListHandler" allow-move-to-account-option
    is-account-store-user saved-passwords="[[savedPasswords]]">
  <div slot="body" class="list-frame">
    <div class="list-item column-header" aria-hidden="true">
        $i18n{deviceOnlyPasswordsHeading}
    </div>
    <iron-list id="deviceOnlyPasswordList" preserve-focus
        items="[[getFilteredPasswords_(deviceOnlyPasswords_,filter)]]"
        class="cr-separators list-with-header"
        scroll-target="[[subpageScrollTarget]]" risk-selection>
      <template>
        <password-list-item entry="[[item]]"
            tabindex$="[[tabIndex]]" focus-row-index="[[index]]"
            first$="[[!index]]" iron-list-tab-index="[[tabIndex]]"
            last-focused="{{lastFocused_}}" list-blurred="{{listBlurred_}}">
        </password-list-item>
      </template>
    </iron-list>
    <div id="noDeviceOnlyPasswordsLabel" class="list-item"
        hidden$="[[isNonEmpty_(deviceOnlyPasswords_)]]">
        $i18n{noPasswordsFound}
    </div>
    <div class="list-item column-header" aria-hidden="true">
        $i18n{deviceAndAccountPasswordsHeading}
    </div>
    <iron-list id="deviceAndAccountPasswordList" preserve-focus
        items="[[getFilteredPasswords_(deviceAndAccountPasswords_,filter)]]"
        class="cr-separators list-with-header"
        scroll-target="[[subpageScrollTarget]]" risk-selection>
      <template>
        <password-list-item entry="[[item]]"
            tabindex$="[[tabIndex]]" focus-row-index="[[index]]"
            first$="[[!index]]" iron-list-tab-index="[[tabIndex]]"
            last-focused="{{lastFocused_}}" list-blurred="{{listBlurred_}}">
        </password-list-item>
      </template>
    </iron-list>
    <div id="noDeviceAndAccountPasswordsLabel" class="list-item"
        hidden$="[[isNonEmpty_(deviceAndAccountPasswords_)]]">
      $i18n{noPasswordsFound}
    </div>
  </div>
</passwords-list-handler>
<div id="manageAccountPasswordsBanner" class="cr-row two-line list-item"
    on-click="onManageAccountPasswordsClicked_">
  <settings-avatar-icon></settings-avatar-icon>
  <div class="flex cr-padded-text">
    <div>$i18nRaw{managePasswordsPlaintext}</div>
    <div class="secondary">[[accountEmail_]]</div>
  </div>
  <cr-icon-button iron-icon="cr:open-in-new"></cr-icon-button>
</div>
<cr-toast id="toast" duration="5000">
  <div>$i18nRaw{devicePasswordsMoved}</div>
</cr-toast>
<template is="dom-if" if="[[showMoveMultiplePasswordsDialog_]]" restamp>
  <password-move-multiple-passwords-to-account-dialog
      passwords-to-move="[[allDevicePasswords_]]"
      account-email="[[accountEmail_]]"
      on-close="onMoveMultiplePasswordsDialogClose_">
  </password-move-multiple-passwords-to-account-dialog>
</template>
